<template lang="">
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品上架</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-alert title="注意：该商品上架需要经过审核员审核" type="warning" show-icon :closable="false" center>
      </el-alert>
      <el-form :model="addshop" :rules="addshoprules" ref="addshopref" label-width="100px" class="demo-ruleForm"
        style="width: 650px;margin-top: 10px;">
        <el-form-item label="商品名" prop="name">
          <el-input v-model="addshop.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="店铺名" prop="Commodity">
          <el-input v-model="addshop.Commodity" clearable></el-input>
        </el-form-item>
        <el-form-item label="店铺地址" prop='address'>
          <el-input v-model="addshop.address" clearable></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload class="upload-demo" drag action="#" :auto-upload="false" :limit="1" ref="upload"
            :http-request="upload" multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
        </el-form-item>
        <el-form-item label="分类">
          <el-cascader v-model="value" expand-trigger='hover' :options="options" :props="catelist"
            @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="仓库数量" prop='Repository'>
          <el-input v-model="addshop.Repository" clearable type='number'></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop='Price'>
          <el-input v-model="addshop.Price" clearable type='number'></el-input>
        </el-form-item>
        <el-form-item label="商品描述" prop='desc'>
          <el-input type="textarea" v-model="addshop.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="upload">添加</el-button>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                //添加商品表单数据
                addshop: {
                    name: '',
                    Commodity: '',
                    address: '',
                    Repository: '',
                    Price: '',
                    desc: ''
                },
                //验证
                addshoprules: {
                    name: [{
                        required: true,
                        message: '请输入商品名',
                        trigger: 'blur'
                    }],
                    Commodity: [{
                        required: true,
                        message: '请输入店铺名',
                        trigger: 'blur'
                    }],
                    address: [{
                        required: true,
                        message: '请输入店铺地址',
                        trigger: 'blur'
                    }],
                    Repository: [{
                        required: true,
                        message: '请输入商品仓库',
                        trigger: 'blur'
                    }],
                    Price: [{
                        required: true,
                        message: '请输入商品价格',
                        trigger: 'blur'
                    }],
                    desc: [{
                        required: true,
                        message: '请输入商品描述',
                        trigger: 'blur'
                    }]
                },
                //头像
                imageUrl: '',
                //下拉
                options: [],
                catelist: {
                    value: 'id',
                    label: 'cat_name',
                },
                value: [],


            }
        },
        methods: {
            handleChange(value) {},

            //获取下拉选项
            getclass() {
                this.$axios.get('/shop/getclass').then(res => {
                    this.options = res.data.data
                })
            },
            //提交
            upload() {
                this.$refs.addshopref.validate(valid => {
                    if (valid) {
                        const formData = new FormData();
                        let file = this.$refs.upload.uploadFiles[0];
                        let {
                            name,
                            Commodity,
                            address,
                            Repository,
                            Price,
                            desc
                        } = this.addshop
                        if (!file) { // 若未选择文件
                            this.$message.error("选择商品图片");
                            return;
                        }
                        if (this.value == '') {
                            this.$message.error("选择商品分类");
                            return;
                        }
                        formData.append('file', file.raw);
                        formData.append('name', name);
                        formData.append('Commodity', Commodity);
                        formData.append('address', address);
                        formData.append('Repository', Repository);
                        formData.append('Price', Price);
                        formData.append('desc', desc);
                        formData.append('classed', this.value);
                        formData.append('user', this.$cookie.get('user'));
                        this.$axios({
                            url: '/shop/addshop',
                            method: 'post',
                            data: formData,
                        }).then(res => {
                            if (res.data == 'ok') {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功等待审核!'
                                });
                                this.$refs.addshopref.resetFields()
                                this.value = '';
                                this.$refs.upload.clearFiles()
                            }
                        })
                    } else {
                        this.$message.error("表单校验失败，请检查");
                        return false;
                    }
                })
            }
        },
        created() {
            this.getclass()
        },

    }
</script>
<style lang="less">
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>